<template id="tmp-spell-tree-manage">
    <div>
        <el-tree :data="jsonData" node-key="id" default-expand-all :expand-on-click-node="false" :draggable="true">
            <div class="custom-tree-node" style="width: 100%" slot-scope="{ node, data }">
                <el-row>
                    <el-col :span="8">
                        <span v-if="spellsInfo['s'+data.spellId] && spellsInfo['s'+data.spellId].name_zhcn">
                            <el-tooltip effect="dark" placement="right-start">
                                <div slot="content" class="wowhead-tooltip">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td v-html="spellsInfo['s'+data.spellId].tooltip_zhcn"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <img :src="'http://db.wowmanage.cn/static/images/wow/icons/medium/'+spellsInfo['s'+data.spellId].icon+'.jpg'"
                                    alt="">
                            </el-tooltip>
                            @{{ spellsInfo['s'+data.spellId].name_zhcn }}
                        </span>
                        <span v-else>
                            @{{ data.label??'【无技能】' }}
                        </span>
                    </el-col>
                    <el-col :span="16">
                        <div style="padding-left: 15px; text-align: end">
                            <template v-if="data.spellId>=0">

                                <el-input type="number" size="mini" v-model="data.spellId" placeholder="技能id" min="0"
                                    @input="changeSpell(data)" class="w-70">
                                    <template slot="prepend">技能id</template>
                                </el-input>
                                <el-input type="number" size="mini" v-model="data.reqPoint" placeholder="消耗技能点" min="0"
                                    max="9999">
                                    <template slot="prepend">消耗技能点</template>
                                </el-input>
                                <el-input type="number" size="mini" v-model="data.reqLevel" placeholder="等级要求" min="0"
                                    max="9999">
                                    <template slot="prepend">要求等级</template>
                                </el-input>

                                <el-button size="mini" type="danger" icon="el-icon-delete" circle
                                    @click="() => remove(node, data)">
                                </el-button>

                            </template>

                            <el-button size="mini" type="warning" icon="el-icon-circle-plus" @click="append(data)"
                                :disabled="spellsCountMax<=spellsCount">添加
                            </el-button>

                        </div>
                    </el-col>
                </el-row>


            </div>
        </el-tree>

        <br>
        <div style="text-align: end">
            <el-button type="warning" @click="save()">保存技能树</el-button>
        </div>
        <br>
        <hr>

        <el-input type="textarea" :rows="3" v-model="myValue" @change="valueChange">
        </el-input>

        <div class="mt-2" style="text-align: end">
            <el-button type="primary" @click="loadData()">加载</el-button>
        </div>

    </div>
</template>
<script>
Vue.component("component-spell-tree-manage", {
    props: ["value", "tip", "type", "sid"],
    template: "#tmp-spell-tree-manage",
    data: function() {
        return {
            message: 0,
            myValue: this.value,
            spellsCount: 0,
            spellsCountMax: 100,
            spellsInfo: [],
            jsonData: [{
                id: 0,
                label: this.tip,
                children: []
            }],
        }
    },
    mounted() {
        this.loadData();
    },

    methods: {
        loadData() {
            if (this.myValue === '' || this.myValue === '[]') {
                return;
            }
            this.jsonData[0].children = JSON.parse(this.myValue === '' ? '[]' : this.myValue);
            this.spellsCount = 0;
            this.addCount(this.jsonData[0].children);
        },
        addCount(node) {
            const t = this;
            t.spellsCount += node.length;
            node.forEach(e => {
                t.addCount(e.children);
                t.getSpellInfo(e.spellId);
            })
        },
        save() {
            if (this.spellsCount > this.spellsCountMax) {
                this.$message.error('技能数量超过限制');
                return;
            }
            let t = this;
            t.myValue = JSON.stringify(t.jsonData[0].children);
            // if (t.myValue === '' || t.myValue === '[]') {
            //     t.$message.error('请先添加技能');
            //     return;
            // }
            post("/manager/server/mallspell/" + t.sid + "/save", {
                data: t.myValue,
                type: t.type
            }, res => {
                t.$message.success('保存成功');
            }, t);
        },
        remove(node, data) {
            const parent = node.parent;
            const children = parent.data.children || parent.data;
            const index = children.findIndex(d => d.id === data.id);
            children.splice(index, 1);
            this.spellsCount--;
        },
        append(data) {
            if (this.spellsCount >= this.spellsCountMax) {
                this.$message.error('无法添加更多技能');
                return;
            }
            data.children.push({
                spellId: 0,
                reqPoint: 1,
                reqLevel: 0,
                children: []
            });
            this.spellsCount++;
        },
        changeSpell(data) {
            let t = this;
            if (data.spellId === '' || data.spellId === '0') return;
            t.getSpellInfo(data.spellId);
        },
        getSpellInfo(spellId) {
            let t = this;
            if (t.spellsInfo['s' + spellId]) {
                return;
            }
            post("/manager/server/mallspell/getSpellInfo", {
                id: spellId
            }, res => {
                t.$nextTick(() => {
                    Vue.set(t.spellsInfo, 's' + spellId, res.data);
                })
            }, t, null, false);
        },

        valueChange: function() {
            this.$emit('input', this.myValue);
        }
    }
});
</script>
<style>
.el-tabs.el-tabs--left {
    height: auto !important;
}

.el-tree-node__content {
    height: 40px !important;
}

.el-tree-node__content>.el-tree-node__expand-icon {
    padding: 5px 0 !important;
}

.el-tree-node__expand-icon {
    font-size: 30px !important;
}

.el-tree-node__content>.el-checkbox {
    margin-bottom: 0 !important;
}

.el-tree-node__content>.el-checkbox .el-checkbox__inner {
    width: 20px !important;
    height: 20px !important;
}

.el-tree-node__content>.el-checkbox .el-checkbox__inner::before {
    top: 8px !important;
}

.el-tree-node__content>.el-checkbox .el-checkbox__inner::after {
    width: 6px !important;
    height: 14px !important;
}

.custom-tree-node .el-input--mini {
    width: auto !important;
    margin-right: 10px;
}

.custom-tree-node .el-input--mini .el-input__inner {
    width: 45px !important;
    padding: 0 5px;
}

.custom-tree-node .w-70.el-input--mini .el-input__inner {
    width: 70px !important;
}

.el-tree .el-input-group__prepend {
    padding: 0 5px !important;
}

/* .el-tooltip__popper.is-dark {
        padding: 5px !important;
    } */

.el-tree .el-col {
    height: 36px;
    /*padding: 2px 0;*/
    display: flex;
    align-items: center;
}

.el-tree .el-col.el-col-16 {
    /*flex-direction: row-reverse;*/
}

.el-tree img.el-tooltip {
    /*border: 2px solid #000000;*/
    border-radius: 5px;
}

.el-tree-node__content:hover {
    background-color: #c4dbff !important;
}


/*.wowhead-tooltip         { visibility: hidden; z-index: 100000006; overflow: visible !important; }*/
.wowhead-tooltip {
    max-width: 320px;
    font-size: 13px;
    /* padding: 8px 10px; */
}

.wowhead-tooltip a {
    text-decoration: none;
}

.wowhead-tooltip a:hover {
    text-decoration: underline;
}

.wowhead-tooltip table {
    border-spacing: 0;
    border-collapse: collapse;
    margin: 0;
    width: 100%;
}

/*maybe remove width:auto*/
.wowhead-tooltip table,
.wowhead-tooltip td,
.wowhead-tooltip th,
.wowhead-tooltip tbody {
    border: 0 !important;
}

.wowhead-tooltip td table td table {
    width: 100%
}

.wowhead-tooltip td,
.wowhead-tooltip th {
    font-family: Verdana, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: white;
}

.wowhead-tooltip th {
    height: auto;
    padding: 3px;
    vertical-align: top;
}

.wowhead-tooltip td {
    text-align: left;
    vertical-align: top;
}

.wowhead-tooltip b {
    font-size: 14px;
    line-height: 19px;
    font-weight: normal;
}

.wowhead-tooltip div.indent {
    padding-left: .6em;
}

.wowhead-tooltip td th,
.wowhead-tooltip td td {
    background: none;
}

.wowhead-tooltip td th {
    padding: 0 0 0 4em;
    text-align: right;
    font-weight: normal;
}

.wowhead-tooltip td td {
    padding: 0;
    text-align: left;
}

.wowhead-tooltip p {
    position: absolute;
    left: -44px;
    top: -1px;
    width: 44px;
    height: 44px;
    background: 4px 4px no-repeat;
    margin: 0;
    padding: 0;
}

.wowhead-tooltip p div {
    width: 44px;
    height: 44px;
    background-image: url(http://db.wowmanage.cn/static/images/Icon/medium/border/default.png);
}

.wowhead-tooltip table.shrink b {
    font-size: 12px;
    line-height: 15px;
}

.wowhead-tooltip table.shrink td,
.wowhead-tooltip table.shrink th {
    font-size: 10px;
    line-height: 14px;
}

.wowhead-tooltip .mapper {
    margin: 2px 0 3px 1px;
    border: none
}

.wowhead-tooltip ins {
    color: #5DF644;
    text-decoration: none;
    border-bottom: 1px dotted;
}

.wowhead-tooltip del {
    color: #FF8040;
    text-decoration: none;
    border-bottom: 1px dotted;
}

.wowhead-tooltip-powered {
    /* background: url(http://db.wowmanage.cn/static/images/powered.png) no-repeat; */
    width: 53px;
    height: 33px;
    position: absolute;
    right: -56px;
    top: 2px;
    display: none;
}

.moneyitem,
.moneygold,
.moneysilver,
.moneycopper,
.moneyalliance,
.moneyhorde,
.moneyarena,
.moneyachievement,
.moneysocketmeta,
.moneysocketred,
.moneysocketyellow,
.moneysocketblue,
.moneysocketprismatic {
    background: no-repeat right center;
    color: white;
}

.moneyitem {
    padding-right: 18px;
}

.moneygold {
    padding-right: 15px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/money-gold.gif);
}

.moneysilver {
    padding-right: 15px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/money-silver.gif);
}

.moneycopper {
    padding-right: 15px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/money-copper.gif);
}

.moneyalliance {
    padding-right: 12px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/alliance.gif);
}

.moneyhorde {
    padding-right: 17px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/horde.gif);
}

.moneyarena {
    padding-right: 18px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/arena.gif);
}

.moneyachievement {
    padding-right: 13px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/achievement.gif);
}

.moneysocketmeta {
    padding-right: 18px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/socket-meta.gif);
}

.moneysocketred {
    padding-right: 18px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/socket-red.gif);
}

.moneysocketyellow {
    padding-right: 18px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/socket-yellow.gif);
}

.moneysocketblue {
    padding-right: 18px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/socket-blue.gif);
}

.moneysocketprismatic {
    padding-right: 18px;
    background-image: url(http://db.wowmanage.cn/static/images/icons/socket-prismatic.gif);
}

a.moneyitem,
a.moneysocketmeta,
a.moneysocketred,
a.moneysocketyellow,
a.moneysocketblue,
a.moneysocketprismatic,
a.moneyachievement {
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    color: white !important;
}

a.moneyitem:hover,
a.moneysocketmeta:hover,
a.moneysocketred:hover,
a.moneysocketyellow:hover,
a.moneysocketblue:hover,
a.moneysocketprismatic:hover,
a.moneyachievement:hover {
    border-bottom: 1px solid white;
}

a span.moneyitem,
a span.moneysocketmeta,
a span.moneysocketred,
a span.moneysocketyellow,
a span.moneysocketblue,
a span.moneysocketprismatic,
a span.moneyachievement {
    color: white;
}

.blizzard-blue {
    color: #00C0FF !important;
}

/***********************/
/* ITEM QUALITY COLORS */
/***********************/

.q,
.q a,
.color-q,
.wowhead-tooltip .q a {
    color: #ffd100 !important
}

/* Default (yellow) */
.q0,
.q0 a,
.color-q0,
.wowhead-tooltip .q0 a {
    color: #9d9d9d !important
}

/* Poor */
.q1,
.q1 a,
.color-q1,
.wowhead-tooltip .q1 a {
    color: #ffffff !important
}

/* Common */
.q2,
.q2 a,
.color-q2,
.wowhead-tooltip .q2 a {
    color: #1eff00 !important
}

/* Uncommon */
.q3,
.q3 a,
.color-q3,
.wowhead-tooltip .q3 a {
    color: #0070dd !important
}

/* Rare */
.q4,
.q4 a,
.color-q4,
.wowhead-tooltip .q4 a {
    color: #a335ee !important
}

/* Epic */
.q5,
.q5 a,
.color-q5,
.wowhead-tooltip .q5 a {
    color: #ff8000 !important
}

/* Legendary */
.q6,
.q6 a,
.color-q6,
.wowhead-tooltip .q6 a {
    color: #e5cc80 !important
}

/* Artifact */
.q7,
.q7 a,
.color-q7,
.wowhead-tooltip .q7 a {
    color: #e5cc80 !important
}

/* Heirloom */
.q8,
.q8 a,
.color-q8,
.wowhead-tooltip .q8 a {
    color: #ffff98 !important
}

/* Light yellow (item set bonuses) */
.q9,
.q9 a,
.color-q9,
.wowhead-tooltip .q9 a {
    color: #71d5ff !important
}

/* Light blue (glyph type) */
.q10,
.q10 a,
.color-q10,
.wowhead-tooltip .q10 a {
    color: #ff4040 !important
}

/* Red (requirement not met, error) */
.q13,
.q13 a,
.color-q13,
.wowhead-tooltip .q13 a {
    color: #ffff98 !important
}

/*********************/
/* DIFFICULTY COLORS */
/*********************/

.r1 {
    color: #FF8040 !important
}

/* Hard */
.r2 {
    color: #FFFF00 !important
}

/* Medium */
.r3 {
    color: #40BF40 !important
}

/* Easy */
.r4 {
    color: #808080 !important
}

/* Trivial */

/****************/
/* CLASS COLORS */
/****************/

.c1,
.c1 a {
    color: #C69B6D !important
}

/* Warrior */
.c2,
.c2 a {
    color: #F48CBA !important
}

/* Paladin */
.c3,
.c3 a {
    color: #AAD372 !important
}

/* Hunter */
.c4,
.c4 a {
    color: #FFF468 !important
}

/* Rogue */
.c5,
.c5 a {
    color: #FFFFFF !important
}

/* Priest */
.c6,
.c6 a {
    color: #C41E3B !important
}

/* Death Knight */
.c7,
.c7 a {
    color: #2359FF !important
}

/* Shaman */
.c8,
.c8 a {
    color: #68CCEF !important
}

/* Mage */
.c9,
.c9 a {
    color: #9382C9 !important
}

/* Warlock */
.c11,
.c11 a {
    color: #FF7C0A !important
}

/* Druid */

/**************/
/* GEM COLORS */
/**************/

.gem1 {
    color: #9D9D9D !important
}

/* Meta */
.gem2 {
    color: #e60c0b !important
}

/* Red */
.gem4 {
    color: #ffff35 !important
}

/* Yellow */
.gem6 {
    color: #f48905 !important
}

/* Orange */
.gem8 {
    color: #295df1 !important
}

/* Blue */
.gem10 {
    color: #b957fc !important
}

/* Purple */
.gem12 {
    color: #22c516 !important
}

/* Green */
.gem14 {
    color: #FFFFFF !important
}

/* Prismatic */

/****************/
/* NPC MESSAGES */
/****************/

.s1 {
    color: #ff3f40 !important
}

/* Yell */
.s2 {
    color: #fffb9f !important
}

/* Say */
.s3 {
    color: #ffb2eb !important
}

/* Whisper */
.s4 {
    color: #ff8040 !important
}

/* Emote */

/********************/
/* REPUTATION RANKS */
/********************/

.rep0,
.rep-hated {
    color: #f00 !important
}

.rep1,
.rep-hostile {
    color: #f44 !important
}

.rep2,
.rep-unfirendly {
    color: #e62 !important
}

.rep3,
.rep-neutral {
    color: #ff0 !important
}

.rep4,
.rep-friendly {
    color: #0f0 !important
}

.rep5,
.rep-honored {
    color: #0f8 !important
}

.rep6,
.rep-revered {
    color: #0fc !important
}

.rep7,
.rep-exalted {
    color: #0ff !important
}

/*****************/
/* SOCKETS ICONS */
/*****************/

.socket-meta {
    padding-left: 26px;
    background: url(http://db.wowmanage.cn/static/images/icons/socket-meta.gif) no-repeat left center;
}

.socket-red {
    padding-left: 26px;
    background: url(http://db.wowmanage.cn/static/images/icons/socket-red.gif) no-repeat left center;
}

.socket-yellow {
    padding-left: 26px;
    background: url(http://db.wowmanage.cn/static/images/icons/socket-yellow.gif) no-repeat left center;
}

.socket-blue {
    padding-left: 26px;
    background: url(http://db.wowmanage.cn/static/images/icons/socket-blue.gif) no-repeat left center;
}

.socket-prismatic {
    padding-left: 26px;
    background: url(http://db.wowmanage.cn/static/images/icons/socket-prismatic.gif) no-repeat left center;
}
</style>
